<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue';
import axios from 'axios';
import { Eleme } from '@element-plus/icons-vue'
// 响应式状态，声明式渲染
const count = ref(10)
const t1 = ref("title")
const awesome = ref(false)
let id = 0
const t2 = ref("")

const data1 = ref([
    {id:id++, name: "张三"},
    {id:id++, name: "李四"},
    {id:id++, name: "王五"},
    {id:id++, name: "赵六"},
])

const brandList = ref([])

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}
function toggle(){
    awesome.value = !awesome.value
}

function sendGet(){
    axios.get("https://www.httpbin.org/get")
      .then((response)=>{
          console.log(response.data)
      }).catch((err)=>{
          console.log(err)
      })
}
function sendPost(){
  const params = {
    userId: "123"
  }
  axios.post("https://apifoxmock.com/m1/4582644-0-default/api/v1/product/listAll", params)
      .then((response)=>{
          console.log(response.data)
      }).catch((err)=>{
          console.log(err)
      })
}

function mockget(){
  axios.get("/api/getBrandList")
    .then((response)=>{
          console.log(response.data)
          brandList.value = response.data.list
      }).catch((err)=>{
          console.log(err)
      })
}
function userlist(){
  axios.post("/user/list",{
    username:"zhangsan"
  }).then((response)=>{
          console.log(response.data)
          brandList.value = response.data.list
      }).catch((err)=>{
          console.log(err)
      })
}

function test1(){
  axios.get("/test1")
  .then((response)=>{
          console.log(response.data)
          brandList.value = response.data.list
      }).catch((err)=>{
          console.log(err)
      })
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})

const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
</script>

<template>
    <!-- 被包裹的对象，在UI里面会自动解析 -->
     <!-- 点击事件，事件监听  v-on: 等同于 @ -->
    <button @click="increment">Count is: {{ count }}</button>
    <!-- 属性绑定， v-bind 可以省略 -->
    <h1 :class="t1">Count is {{ count }}</h1>

    <!-- 条件渲染 -->
    <button @click="toggle">Change State</button>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <!-- 循环渲染 -->
     <ul>
        <li v-for="item in data1">{{ item.name }}</li>
     </ul>

     <!-- v-model，双向绑定 -->
     <input v-model="t2" >
     {{ t2 }}

     <Child name = "张三">

     </Child>

     <button @click="sendGet">发送Get请求</button>
     <button @click="sendPost">发送post请求</button>
     <button @click="mockget">发送mock get请求</button>
     <button @click="userlist">获取用户列表</button>
     <button @click="test1">测试mock</button>

     <table>
        <tr>
          <th>id</th>
          <th>品牌名称</th>
        </tr>
        <tr v-for="item in brandList">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
     </table>


    <div class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
  </div>


  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
  <el-button type="primary" loading>
    <template #loading>
      <div class="custom-loading">
        <svg class="circular" viewBox="-10, -10, 50, 50">
          <path
            class="path"
            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
          />
        </svg>
      </div>
    </template>
    Loading
  </el-button>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" width="120" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          Detail
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>